<template>
	<view class="" v-if="!loadding">
        <view style="background-color: #F6645E;height: 210rpx">
            <view style="padding: 30rpx;display: flex">
                <view style="width: 60%;display: flex;justify-content: space-around">
                    <view v-if="info.is_points == '1'" style="text-align: center;color: white">
                        <view style="font-weight: bold">
                            {{ info.point }}
                        </view>
                        <view style="font-size: 22rpx;color: rgba(255,255,255,0.5)">
                            {{ info.points_name }}
                        </view>
                    </view>
					<view v-if="info.is_grow == '1'" style="text-align: center;color: white">
					    <view style="font-weight: bold">
					        {{ info.growth_value }}
					    </view>
					    <view style="font-size: 22rpx;color: rgba(255,255,255,0.5)">
					        {{ info.growth_name }}
					    </view>
					</view>
                    <view style="text-align: center;color: white">
                        <view>
                            <text style="font-weight: bold">{{info.cont_sign}}</text>天
                        </view>
                        <view style="font-size: 22rpx;color: rgba(255,255,255,0.5)">
                            连续签到
                        </view>
                    </view>
                    <view style="text-align: center;color: white">
                        <view >
                            <text style="font-weight: bold">{{info.count}}</text> 天
                        </view>
                        <view style="font-size: 22rpx;color: rgba(255,255,255,0.5)">
                            总签到
                        </view>
                    </view>
                </view>
                <view style="width: 30%">
                    <navigator url="/pages/plus/signin/record" style="width: 200rpx;height: 60rpx;border-radius: 40rpx;background-color: #FFB92B;color: white;margin-left: 150rpx;margin-top: 40rpx">
                        <view style="padding-top: 9rpx;margin-left: 25rpx;font-size: 26rpx">
                            详细记录<u-icon name="arrow-right" color="white" size="25"></u-icon>
                        </view>
                    </navigator>
                </view>
            </view>
        </view>
		
        <u-popup v-model="ruleshow" mode="bottom" border-radius="50" z-index="80" :closeable="true">
            <view style="padding: 30rpx;margin-top: 50rpx">
                <u-divider bg-color="white">签到规则</u-divider>
                <rich-text :nodes="ruledata"></rich-text>
            </view>
            <view style="height: 50rpx">
            </view>
            <view class="hlbbutton" style="width: 95%" @click="ruleshow=false">
                确定
            </view>
        </u-popup>
		
        <view class="hlbblock30" style="margin-top: -60rpx">
            <view style="display: flex;justify-content: space-between;align-items: center">
                <view style="">
                    <text style="font-weight: bold">{{ today_year }}年{{ today_month }}月</text> <text class="font2599" style="margin-left: 20rpx">本月已签{{info.month_sign}}天</text>
                </view>
                <view @click="ruleshow=true" style="display: flex;align-items: center">
                    <image src="/static/images/task/qu.png" style="width: 30rpx;margin-bottom: 5rpx" mode="widthFix"></image>
                    <text style="color: #FFB92B;font-size: 26rpx;margin-left: 20rpx">签到规则</text>
                </view>
            </view>
			
            <view style="display: flex;justify-content: space-around;background-color: #F6F6F6;margin-top: 50rpx;border-radius: 15rpx">
                <view style="font-size: 25rpx;color: #999999" v-for="(item, index) in weeklist">
                    {{item}}
                </view>
            </view>
			
            <view style="background-color: #F6F6F6;margin-top: 30rpx;border-radius: 15rpx">
                <view v-for="(item, index) in daylist" style="margin: 10rpx 0;position: relative;display: inline-block;width: 14.28%;height: 100rpx;text-align: center;vertical-align: middle;">
                    <block v-if="item.is_sign==1">
                        <image src="/static/images/task/ok.png" style="width: 70rpx;margin: 10rpx auto 0" mode="widthFix"></image>
                        <view style="position: absolute;font-weight: bold;top: 20rpx;right: 0;left: 0">
                            {{item.day==0?' ':item.day}}
                        </view>
                    </block>
                    <block v-else>
                        <block v-if="item.after_today==1">
                            <view  style="font-weight: bold;margin-top: 20rpx;color: #999999">
                                {{item.day==0?' ':item.day}}
                            </view>
                        </block>
                        <block v-else>
                            <view @click="dosign(item)" style="font-weight: bold;margin-top: 20rpx">
                                {{item.day==0?' ':item.day}}
                            </view>
                        </block>
                    </block>
                    <view v-if="item.is_today==1" style="width: 10rpx;height: 10rpx;border-radius: 5rpx;background-color: #FFB92B;position: absolute;bottom: 5rpx;right: 40rpx"></view>
                </view>
            </view>
			
            <u-popupopt @close="getData()" v-model="ptshow" mode="center" :closeable="true" close-icon-color="white" style="margin-bottom: 300rpx">
                <view style="padding: 30rpx;">
                    <view>
						<image v-if="info.is_points == '1' && info.is_grow == '1'" src="http://img.pighack.com/202205091542013b63a0565.png" style="width: 600rpx;height: 600rpx" mode="aspectFill"></image>
						<image v-else-if="info.is_points == '0' && info.is_grow == '1'" src="http://img.pighack.com/20220509154123d7e722115.png" style="width: 600rpx;height: 600rpx" mode="aspectFill"></image>
                        <image v-else src="http://img.pighack.com/202203182304422a1077904.png" style="width: 600rpx;height: 600rpx" mode="aspectFill"></image>
                    </view>
                    <view v-if="info.is_points == '1' || info.is_grow == '1'" style="text-align: center;margin-top: -100rpx">
                        <text v-if="info.is_points == '1'" style="color: #FFC400;font-size: 40rpx;margin-right: 20rpx">
                            {{ info.points_name }}
                        </text>
                        <text v-if="info.is_points == '1'" style="color: white;font-size: 40rpx;font-weight: bold;margin-right: 20rpx">
                            +{{ addcredit }}
                        </text>
						<text v-if="info.is_grow == '1'" :style="{ color: info.is_points == '1' ? '#81D1FC' : '#FFC400'}" style="font-size: 40rpx;margin-right: 20rpx">
						    {{ info.growth_name }}
						</text>
						<text v-if="info.is_grow == '1'" style="color: white;font-size: 40rpx;font-weight: bold;margin-right: 20rpx">
						    +{{ addcredit1 }}
						</text>
                        <image src="/static/images/task/pt2.png" style="width: 40rpx;margin-bottom: 10rpx" mode="widthFix"></image>
                    </view>
                </view>
            </u-popupopt>
			
            <view @click="onSign" v-if="!is_sign" class="hlbbutton" style="width: 95%;margin-top: 50rpx;background: linear-gradient(to right,#F67136,#F63E36);">
                立即签到
            </view>
            <view v-else  class="hlbbutton" style="width: 95%;margin-top: 50rpx;background-color: #FFE9E8;color: #F63E36">
                今日已签
            </view>
            <view class="font2599" style="text-align: center">
                点击日期可以补签哦~
            </view>
        </view>
		
        <view class="hlbblock30" v-if="reward_data.length>0">
            <u-section title="连续签到有礼" :right="false" :show-line="false" color="#333333" sub-color="#999999" sub-title="进入签到"></u-section>
            <view style="margin-top: 30rpx">
                <view v-for="item in reward_data" style="width: 20%;display: inline-block">
                    <view style="margin: 10rpx;background-color: #FEE9C0;border-radius: 15rpx">
                        <view style="color: #FFA530;font-size: 22rpx;text-align: center;padding-top: 6rpx">
                            连续{{ item.day }}天
                        </view>
						<block v-if="info.is_points == '1' && info.is_grow == '1'">
							<view v-if="item.is_receive" style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/double_right.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
							<view v-else style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/double.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
						</block>
						<block v-else-if="info.is_points == '0' && info.is_grow == '1'">
							<view v-if="item.is_receive" style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/right.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
							<view v-else style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/grow.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
						</block>
						<block v-else>
							<view v-if="item.is_receive" style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/right.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
							<view v-else style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/star.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
						</block>
						<view v-if="info.is_points == '1'" style="color: #FFA530;font-size: 24rpx;text-align: center;margin-top: -10rpx">
						    {{ item.point }}{{ info.points_name }}
						</view>
						<view v-if="info.is_grow == '1'" style="color: #FFA530;font-size: 24rpx;text-align: center;margin-top: -10rpx">
						    {{ item.grow }}{{ info.growth_name }}
						</view>
                    </view>
                    <view v-if="item.is_receive" class="hlbbutton" style="background-color: white;width: 110rpx;color: #999999;border: 1px #F0F0F0 solid;height: 45rpx;line-height: 45rpx;font-size: 22rpx;margin:20rpx auto">
                        已领取
                    </view>
                    <view v-else-if="item.is_reach" @click="doreword(1,item)" class="hlbbutton" style="background-color: #FFB92B;width: 110rpx;color: white;height: 45rpx;line-height: 45rpx;font-size: 22rpx;margin:20rpx auto">
                        领取
                    </view>
                    <view v-else class="hlbbutton" style="background-color: #D1D1D1;width: 110rpx;color: white;height: 45rpx;line-height: 45rpx;font-size: 22rpx;margin:20rpx auto">
                        未达成
                    </view>
                </view>
            </view>
        </view>
		
        <view class="hlbblock30" v-if="total_data.length>0">
            <u-section title="签到有礼" :right="false" :show-line="false" color="#333333" sub-color="#999999" sub-title="进入签到"></u-section>
            <view style="margin-top: 30rpx">
                <view v-for="item in total_data" style="width: 20%;display: inline-block">
					<view style="margin: 10rpx;background-color: #FEE9C0;border-radius: 15rpx">
					    <view style="color: #FFA530;font-size: 22rpx;text-align: center;padding-top: 6rpx">
					        累计{{ item.day }}天
					    </view>
						<block v-if="info.is_points == '1' && info.is_grow == '1'">
							<view v-if="item.is_receive" style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/double_right.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
							<view v-else style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/double.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
						</block>
						<block v-else-if="info.is_points == '0' && info.is_grow == '1'">
							<view v-if="item.is_receive" style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/right.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
							<view v-else style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/grow.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
						</block>
						<block v-else>
							<view v-if="item.is_receive" style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/right.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
							<view v-else style="margin: auto;width: 110rpx;margin: -16rpx 0 -20rpx">
							    <image src="/static/images/task/star.png" style="width: 100%;margin: auto" mode="widthFix"></image>
							</view>
						</block>
						<view v-if="info.is_points == '1'" style="color: #FFA530;font-size: 24rpx;text-align: center;margin-top: -10rpx">
						    {{ item.point }}{{ info.points_name }}
						</view>
						<view v-if="info.is_grow == '1'" style="color: #FFA530;font-size: 24rpx;text-align: center;margin-top: -10rpx">
						    {{ item.grow }}{{ info.growth_name }}
						</view>
					</view>
                    <view v-if="item.is_receive" class="hlbbutton" style="background-color: white;width: 110rpx;color: #999999;border: 1px #F0F0F0 solid;height: 45rpx;line-height: 45rpx;font-size: 22rpx;margin:20rpx auto">
                        已领取
                    </view>
                    <view v-else-if="item.is_reach" @click="doreword(2,item)" class="hlbbutton" style="background-color: #FFB92B;width: 110rpx;color: white;height: 45rpx;line-height: 45rpx;font-size: 22rpx;margin:20rpx auto">
                        领取
                    </view>
                    <view v-else class="hlbbutton" style="background-color: #D1D1D1;width: 110rpx;color: white;height: 45rpx;line-height: 45rpx;font-size: 22rpx;margin:20rpx auto">
                        未达成
                    </view>
                </view>
            </view>
        </view>
		
        <view style="display: none" class="signin-container">
            <view class="sigin-title d-c-c"><text>签到有礼</text></view>
            <view class="sign-main">
                <view class="sign-main-bg">
                    <view class="sign-head f28">
                        <view class="small" v-if="reward.length > 0 && reward[0] >= 1">
                            (再签到
                            <text class="p-0-10 yellow fb">{{ reward[0] }}</text>
                            天可得到
                            <text class="p-0-10 yellow fb">{{ point[reward[0]] }}</text>
                            积分)
                        </view>
                        <view class="small" v-if="reward.length > 0 && reward[0] == 1 && !is_sign">(今天签到即可得到额外奖励)</view>
                    </view>
                    <view class="sign-calendar-wrap">
                        <view class="date-text">{{ today_year }}年{{ today_month }}月</view>
                        <view class="week-list">
                            <view class="week-item" v-for="(item, index) in weeklist" :key="index">{{ item }}</view>
                        </view>
                      <!--  <view class="date-list-wrap">
                            <view class="date-item" :class="item.type != 0 ? 'secondary-date-item' : ''" v-for="(item, index) in daylist" :key="index">
                                <text v-if="list.indexOf(item.day) > -1 && item.type == 0" class="icon-box">{{ item.day }}</text>
                                <template>
                                    <text class="iconfont icon-libao" v-if="reward.indexOf(item.day - today) > -1 && item.type == 0 && list.indexOf(item.day) == -1"></text>
                                    <view v-if="list.indexOf(item.day) == -1 && item.type == 0 && reward.indexOf(item.day - today) == -1">
                                        <text>{{ item.day }}</text>
                                    </view>
                                </template>
                            </view>
                        </view>-->
                    </view>
                </view>
                <view class="pt30 d-c-c f34 white">
                    你已经累计签到
                    <text class="p-0-10 yellow fb">{{ days }}</text>
                    天
                </view>
                <view class="btns">
                    <button type="primary" @click="onSign" v-if="!is_sign">立即签到</button>
                    <view v-else class="d-c-c yellow f40 fb"><text class="iconfont icon-queren mr10"></text>今日已签到</view>
                </view>
            </view>
        </view>
		
		<!--活动规则-->
<!--		<view class="rule-btn" @click="gotoRuleFunc">活动规则</view>-->
	</view>
</template>

<script>
import utils from '@/common/utils.js';

export default {
	data() {
		return {
			/*是否正在加载*/
            loadding: true,
			/*星期*/
			weeklist: ['日', '一', '二', '三', '四', '五', '六'],
			/*天数列表*/
			daylist: [],
			/*年*/
			year: null,
			/*今天的年份*/
			today_year: null,
			/*月*/
			month: null,
			/*今天的年份*/
			today_month: null,
			/*天*/
			day: null,
			/*今天的年份*/
			today_day: null,
			/*当月签到的数据*/
			list: [],
			/*奖励天数*/
			reward: [],
			/*当月连续签到的天数*/
			days: 0,
			/*当天日期*/
			today: 0,
			/*今天是否签到*/
			is_sign: false,
			/*签到额外积分*/
			point: [],
            ruleshow: false,
            ruledata: '',
            reward_data: [],
            total_data: [],
            ptshow: false,
            addcredit: 0,
			addcredit1: 0,
            info: [],
		};
	},
	mounted() {
		/*初始化*/
		this.init();

		/*获取数据列表*/
		this.getData();
	},
	methods: {
		/*获取数据*/
		getData() {
			let self = this;
			uni.showLoading({
				title: '加载中'
			});
			self._get('plus.sign.sign/index', {}, function(res) {
				self.info = res.data.list;
				self.reward_data = res.data.reward_data;
				self.total_data = res.data.total_data;
				self.point = res.data.point;
				self.daylist = res.data.list.list
				
				// if (self.list.indexOf(self.day) >= 0) {
				// 	self.is_sign = true;
				// }
				self.loadding = false;
				uni.hideLoading();
			});
            self._get('plus.sign.sign/getSign', {}, function (res) {
                /*详情内容格式化*/
                res.data.detail = utils.format_content(res.data.detail);
                self.ruledata = res.data.detail;
                uni.hideLoading();
            });
		},
		
		/*领取奖励*/
        doreword(type,item){
            let self = this;
            uni.showLoading({
                title: '领取中。。',
                mask:true
            });
            self._get('plus.sign.sign/receive', {
                type: type,
                day: item.day
            }, function(res) {
                uni.hideLoading();
                self.showSuccess(res.data, function(){
                    self.getData();
                });
            });
        },
		
		/*签到*/
        dosign(item) {
            let self = this;
            uni.showLoading({
                title: '正在提交',
                mask: true
            })
            self._get('plus.sign.sign/add', {
                day:item.day
            }, function(res) {
                uni.hideLoading();
                self.addcredit = res.data.point;
				self.addcredit1 = res.data.grow;
                self.ptshow = true;
				setTimeout(() => {
					self.ptshow = false;
				}, 3000);
                // self.showSuccess(res.data.msg, function(){
                //     self.getData();
                // });
            });
        },

		/*签到*/
		onSign() {
			let self = this;
			if (self.is_sign) {
				uni.showToast({
					title: '今天已签到',
					duration: 2000
				});
				return false;
			}
			uni.showLoading({
				title: '正在提交',
				mask: true
			})
			self._get('plus.sign.sign/add', {}, function(res) {
				uni.hideLoading();
                self.addcredit = res.data.point;
				self.addcredit1 = res.data.grow;
                self.ptshow = true;
				setTimeout(() => {
					self.ptshow = false;
				}, 3000);
			    /*
				self.showSuccess(res.data.msg, function(){
					self.getData();
				});*/
			});
		},

		/*初始化*/
		init() {
			if (this.year === null && this.month === null && this.day === null) {
				let nowDate = new Date();
				this.year = nowDate.getFullYear();
				this.today_year = nowDate.getFullYear();
				this.month = nowDate.getMonth();
				this.today_month = nowDate.getMonth() + 1;
				this.day = nowDate.getDate();
				this.today_day = nowDate.getDate();
			}
			// this.joinDay();
		},

		/*组合天*/
		joinDay() {
			let res = [];
			let currentMonth = this.getMonthCount(this.year, this.month);
			let preMonth = this.getPreMonthCount(this.year, this.month);
			let nextMonth = this.getNextMonthCount(this.year, this.month);
			let whereMonday = this.getWeekday(this.year, this.month);
			let preArr = [];
			if (whereMonday != 0) {
				preArr = preMonth.slice(-1 * whereMonday);
			}

			let nextArr = nextMonth.slice(0, 42 - currentMonth.length - whereMonday);
			let preArrList = this.numConvertNode(preArr, 'pre');
			let currentMonthList = this.numConvertNode(currentMonth, null);
			let nextArrList = this.numConvertNode(nextArr, 'next');

			res = [].concat(preArrList, currentMonthList, nextArrList);
			this.daylist = res;
		},

		/*天数转换*/
		numConvertNode(arr, type) {
			let _type = 0;
			let list = [];
			let len = arr.length;
			if (type != null) {
				if (type == 'pre') {
					_type = -1;
				} else {
					_type = 1;
					if (len > 7) {
						len = len - 7;
					}
				}
			}

			for (let i = 0; i < len; i++) {
				let node = {
					type: _type,
					day: arr[i]
				};
				list.push(node);
			}
			return list;
		},

		/*判断是否闰年*/
		isLeapYear(year) {
			return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
		},

		/*获得每个月的日期有多少，注意 month - [0-11]*/
		getMonthCount(year, month) {
			let arr = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			let count = arr[month] || (this.isLeapYear(year) ? 29 : 28);
			return Array.from(new Array(count), (item, value) => value + 1);
		},

		/*获得某年某月的 1号 是星期几，这里要注意的是 JS 的 API-getDay() 是从 [日-六](0-6)，返回 number*/
		getWeekday(year, month) {
			let date = new Date(year, month, 1);
			return date.getDay();
		},

		/*获得上个月的天数*/
		getPreMonthCount(year, month) {
			if (month === 0) {
				return this.getMonthCount(year - 1, 11);
			} else {
				return this.getMonthCount(year, month - 1);
			}
		},

		/*获得下个月的天数*/
		getNextMonthCount(year, month) {
			if (month === 11) {
				return this.getMonthCount(year + 1, 0);
			} else {
				return this.getMonthCount(year, month + 1);
			}
		},

		/*跳转规则页面*/
		gotoRuleFunc() {
			this.gotoPage('/pages/plus/signin/rule/rule');
		}
	}
};
</script>

<style>
.signin-container {

	background: #e2231a;
}
image{
    display: inline-block;
}

.signin-container .sigin-title {
	padding-top: 40rpx;
	height: 200rpx;
	color: #ffe19f;
}
.signin-container .sigin-title text {
	font-size: 80rpx;
	font-weight: bold;
}

.signin-container .sign-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1;
}

.signin-container .sign-main {
	margin: 45rpx;
}

.signin-container .sign-main-bg {
	background: #ff5649;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 16rpx 0 rgba(0,0,0,.2);
}

.signin-container .sign-main .sign-head {
	padding: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #ffffff;
}

.signin-container .sign-main .sign-head .big {
	font-size: 30rpx;
}

.signin-container .sign-calendar-wrap {
	width: 100%;
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 -4rpx 8rpx 0 rgba(0,0,0,.1);
}

.sign-calendar-wrap .date-text {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #e2231a;
	font-size: 30rpx;
}

.sign-calendar-wrap .week-list {
	display: flex;
	justify-content: flex-start;
}

.sign-calendar-wrap .week-list .week-item {
	width: 94rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #999999;
	font-size: 28rpx;
	font-weight: bold;
}

.sign-calendar-wrap .date-list-wrap {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.sign-calendar-wrap .date-list-wrap .date-item {
	width: 94rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	font-weight: bold;
}

.sign-calendar-wrap .date-list-wrap .date-item .icon-box {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background: #ff5850;
	color: #FFFFFF;
}

.sign-calendar-wrap .date-list-wrap .date-item image {
	width: 60rpx;
	height: 60rpx;
}

.sign-calendar-wrap .date-list-wrap .date-item .iconfont {
	color: #ff5850;
	font-size: 50rpx;
	font-weight: 100;
}

.sign-calendar-wrap .date-list-wrap .secondary-date-item {
	color: #efe3c8;
}

.sign-main .btns {
	margin-top: 40rpx;
	padding: 0 20rpx 40rpx;
}

.sign-main .btns button {
	height: 100rpx;
	line-height: 100rpx;
	text-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.3);
	border-radius: 50rpx;
	font-size: 36rpx;
	background: linear-gradient(0deg, #ff4239, #ff5850, #ff6a63);
	box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
	color: #ffe4e2;
}

.rule-btn {
	position: fixed;
	top: calc(var(--window-top) + 30rpx);
	padding: 0 20rpx 0 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	background: linear-gradient(90deg, #ff5850, #e2231a);
	box-shadow: 0 10rpx 16rpx 0 rgba(0,0,0,.2);
	border-radius: 40rpx 0 0 40rpx;
	color: #ffffff;
	right: 0;
	z-index: 1;
}
.signin-container .btns .iconfont{ font-size: 40rpx; color: yellow;}
</style>
